<template>
  <div>
    <div class="notice-container">
      <div class="notice-header">
        <span class="red">·</span> 通知：
      </div>
      <div
        ref="noticeBody"
        class="notice-body"
      >
        <ul
          ref="marqueeBox"
          class="marquee-box"
          @mouseenter="stopTimer"
          @mouseleave="startTimer"
        >
          <li
            ref="marquee"
            class="marquee-list"
          >
            <a
              class="pointer"
              @click="showNotice"
            >{{ message }}</a>
          </li>
        </ul>
      </div>
    </div>
    <erp-drawer
      :title="drawerTitle"
      :visible.sync="drawer"
      :show-close="false"
      direction="rtl"
      @close="handleClose"
    >
      <template #default>
        <div class="anno-content">
          {{ message }}
        </div>
      </template>
    </erp-drawer>
  </div>
</template>

<script>
import Vue from 'vue';
import ErpDrawer from '@/components/erp/ErpDrawer/ErpDrawer';
import {Drawer} from "element-ui";

Vue.use(Drawer);
/**
 * 公告栏
 * @author maolin
 */
export default {
  name: "NoticeSlide",
  components: {
    ErpDrawer
  },
  data () {
    return {
      drawerTitle: '公告栏',
      drawer: false,
      marquee: {
        containerWidth: 0,
        width: 0,
        marquee: null,
        timer: null,
        disx: 0
      },
      message: "2020年元旦放假通知：本次元旦根据国家法定节假日执行，放假时间为：2021.1.1~2021.1.3日 今年新冠病毒还是很严重，大家出门要记得戴口罩!!!"
    };
  },
  mounted() {
    setTimeout(() => {
      this.runMarquee();
    }, 1000);
  },
  methods: {
    /**
     * 走马灯开始
     * @public
     */
    runMarquee () {
      if (this.$refs.marquee) {
        let width = this.$refs.marquee.getBoundingClientRect().width;
        let containerWidth = this.$refs.noticeBody.getBoundingClientRect().width;

        let marquee = this.$refs.marqueeBox;
        this.marquee = {
          width,
          containerWidth,
          marquee,
          timer: null,
          disx: 0,
        };
        this.startTimer();
      }

    },
    /**
     * 暂停定时器
     * @public
     */
    stopTimer () {
      clearInterval(this.marquee.timer);
      this.marquee.timer = null;
    },
    /**
     * 开始计时
     * @public
     */
    startTimer () {
      if (this.marquee.width <= this.marquee.containerWidth) {
        return false;
      }
      this.marquee.timer = setInterval(() => {
        this.marquee.disx --;
        if (-this.marquee.disx >= this.marquee.width + 100) {
          this.marquee.disx = this.marquee.containerWidth;
        }
        this.marquee.marquee.style.left = this.marquee.disx + 'px';
      }, 10);
    },
    /**
     * 关闭公告详情
     * @public
     */
    handleClose () {
      this.drawer = false;
    },
    /**
     * 打开公告详情
     * @public
     */
    showNotice () {
      this.drawer = true;
    }
  }
};
</script>

<style lang="scss" scoped>
    $primaryColor: var(--primary-color);
    .anno-content{
        font-size: 16px;
        line-height: 1.4rem;
        text-indent: 2em;
    }
    .notice-container{
        display: flex;
        flex-wrap: nowrap;
        font-size: 12px;
        line-height: 50px;
        color: $primaryColor;
        .notice-header{
            width: 60px;
            .red{
                float: left;
                font-size: 24px;
                color: #EE113A;
            }
        }
        .notice-body{
            text-decoration: underline;
            width: calc(100% - 60px);
            overflow: hidden;
            position: relative;
            .marquee-box{
                position: absolute;
                display: flex;
                white-space: nowrap;
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .marquee-list{
                a{
                    text-decoration: underline;
                }
            }
        }
    }
</style>
